<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta content="" name="description">
    <meta content="" name="author">
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/favicon.ico" rel="icon">
    <link href="https://getbootstrap.com/docs/3.4/examples/navbar-static-top/" rel="canonical">

    <title>令牌</title>

    <!-- Bootstrap core CSS -->
    <link href="../../css/bootstrap.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/assets/css/ie10-viewport-bug-workaround.css"
          rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/examples/navbar-static-top/navbar-static-top.css"
          rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/assets/js/ie8-responsive-file-warning.js"></script>
    <![endif]-->
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="app">
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed"
                        data-target="#navbar"
                        data-toggle="collapse" type="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">看板</a>
            </div>
            <div class="navbar-collapse collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li class="dropdown">
                        <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"
                           href="#"
                           role="button">工作流 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">待办故事</a></li>
                            <li><a href="#">迭代任务</a></li>
                            <li><a href="#">后端开发</a></li>
                            <li class="divider" role="separator"></li>
                            <li class="dropdown-header">前端开发</li>
                            <li><a href="#">软件测试</a></li>
                            <li><a href="#">运行维护</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><p id="current_user"></p></li>
                    <li ></li>
                    <li><!-- 登录模块 -->
                        <div v-show="!ruleLoginIf">
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#myModal2">
                                登录
                            </button>
                        </div>
                        <div v-if="ruleLoginIf">
                            <button @click="delLogin()" class="btn btn-success"><span
                                    class="glyphicon glyphicon-open" aria-hidden="true"></span>注销
                            </button>
                        </div></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <div class="container-fluid">
        <div class="col-md-4">
            <div class="panel panel-success">
                <!-- Default panel contents -->
                <div class="panel-heading">功能操作区</div>
                <div class="panel-body">
                    <div class="list-group">
                        <a class="list-group-item" href="/sub/flow/flow.html">
                            工作流管理
                        </a>
                        <a class="list-group-item" href="/sub/story/story.html">故事管理</a>
                        <a class="list-group-item" href="/sub/task/task.html">任务管理</a>
                        <a class="list-group-item" href="/sub/user/user.html">用户管理</a>
                        <a class="list-group-item active" href="/sub/rule/rule.html">规则管理</a>
                        <a class="list-group-item" href="/sub/kanban/kanban.html">看板墙</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">规则界面</div>
                <div class="panel-body">
                    <div class="panel panel-success">
                        <div class="panel-heading">添加规则</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <table class="table table-condensed">
                                    <input placeholder="用户id" class="form-control"
                                           style="width: 32%;float: left;margin-right: 2%" type="text"
                                           v-model="editRule.userid">
                                    <input placeholder="URL" class="form-control"
                                           style="width: 32%;float: left;margin-right: 2%" type="text"
                                           v-model="editRule.url">
                                    <input placeholder="启动状态(true/false)" class="form-control"
                                           style="width: 32%;float: left" type="text"
                                           v-model="editRule.token">
                                    <br/>
                                    <div>
                                        <button @click="addRule()" class="btn btn-success"><span
                                                aria-hidden="true" class="glyphicon glyphicon-open"></span>发布
                                        </button>
                                    </div>
                                </table>
                            </div>
                        </div>
                    </div>


                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h1 class="modal-title" id="myModalLabel">编辑</h1>
                                </div>
                                <div class="modal-body">
                                    <td><input class="form-control" type="hidden" v-model="editRule.id"></td>
                                    <br>
                                    <td><input class="form-control" type="text" v-model="editRule.userid"></td>
                                    <br>
                                    <td><input class="form-control" type="text" v-model="editRule.url"></td>
                                    <br>
                                    <td><input class="form-control" type="text" v-model="editRule.token"></td>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button @click="updateRule" class="btn btn-success btn-sm">保存修改</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-info">
                        <div class="form-group">
                            <br>
                            <input class="form-control" id="rule" name="rule" placeholder="搜索栏"
                                   style="width: 40%;margin: 0 auto" type="text"><br>
                            <button @click="inquiryRule" class="btn btn-default">查询</button>
                            <button @click="loadAllRule" class="btn btn-primary">查询全部</button>
                            <button @click="inquiryUser" class="btn btn-primary">查询规则</button>
                        </div>
                    </div>


                    <table class="table table-hover">
                        <tr>
                            <th style="width: 20%">主键</th>
                            <th style="width: 20%">用户id</th>
                            <th style="width: 20%">网址URL</th>
                            <th style="width: 20%">启动状态</th>
                            <th style="width: 20%">功能区</th>
                        </tr>
                        <tr :key="t.id" v-for="(t,index) in rules">
                            <td>{{t.id}}</td>
                            <td>{{t.userid}}</td>
                            <td>{{t.url}}</td>
                            <td>{{t.token}}</td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                        <span class="glyphicon glyphicon-cog"></span>设置 <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <button @click="conceal(t.id,index)" class="btn btn-warning">编辑</button>
                                        <button @click="deleteRuleById(t.id,index)" class="btn btn-danger">删除</button>
                                    </ul>
                                </div>
                            </td>
                        </tr>

                        <tr :class="hideEditView?'hidden':''">
                            <td><input type="hidden" v-model="editRule.id"></td>
                            <td><input size="10" type="text" v-model="editRule.userid"></td>
                            <td><input size="10" type="text" v-model="editRule.url"></td>
                            <td><input size="10" type="text" v-model="editRule.token"></td>
                            <td>
                                <button @click="updateRule" class="btn btn-success btn-sm">保存修改</button>
                            </td>
                        </tr>

                    </table>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h5 class="modal-title" id="myModalLabel2">看板后台系统</h5>
                                </div>
                                <div class="modal-body">
                                    <div title="登录">
                                        <input placeholder="账号" class="form-control"
                                               type="text"
                                               v-model="ruleUser.username"><br>
                                        <input placeholder="密码" class="form-control"
                                               type="password"
                                               v-model="ruleUser.password">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button @click="ruleLogin()" class="btn btn-primary"><span
                                            class="glyphicon glyphicon-open" aria-hidden="true"></span>登录
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script crossorigin="anonymous"
            integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58"
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            src="../../js/jquery-1.12.4.min.js"></script>
    <script>window.jQuery || document.write('<script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.38/assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="../../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                ruleUser: {
                    id: 0,
                    name: '',
                    username: '',
                    password: '',
                    jobno: '',
                    position: ''
                },
                rules: [],
                editRule: {
                    id: 0,
                    userid: '',
                    url: '',
                    token: ''
                },
                hideEditView: true,
                ruleLoginIf: false
            },
            methods: {
                loadAllRule: function () {
                    const self = this;
                    $.getJSON("/rule/all", function (r) {
                        console.log(r);
                        self.rules = r.data;

                    })
                },
                // 模糊查询
                inquiryRule: function () {
                    const self = this;
                    const value = $("#rule").val();
                    $.ajax({
                        url: '/rule/fuzzyQuery',
                        type: 'POST',
                        data: JSON.stringify(value), //转换为JSON
                        contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: (r) => {
                            self.rules = r.data;
                            console.log(r);
                        },
                        error: () => {
                            alert('提交请求失败');
                        }
                    })
                },
                //根据用户查找令牌
                inquiryUser: function () {
                    const self = this;
                    $.getJSON("/rule/findByUserId/" + this.ruleUser.id, function (r) {
                        console.log(r);
                        self.rules = r.data;
                    })
                },
                //登录
                ruleLogin: function () {
                    const self = this;
                    $.ajax({
                        url: '/login/doLogin',
                        type: 'POST',
                        data: JSON.stringify(this.ruleUser), //转换为JSON
                        contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: (r) => {
                            if (!r.result) {
                                alert('登陆失败,请检查账号密码');
                            } else {
                                self.ruleUser = r.data;
                                console.log(this.ruleUser);
                                app.ruleCurrentUser();
                                $('#myModal2').modal('hide');
                            }
                        },
                        error: () => {
                            alert('提交请求失败');
                        }
                    })
                }
                ,
                //注销
                delLogin: function () {
                    const self = this;
                    $.getJSON("/login/logout", function (r) {
                        self.ruleUser = null;
                        app.ruleCurrentUser();
                    })
                    location.href = "/login.html";

                },
                //显示当前用户
                ruleCurrentUser: function () {
                    const self = this;
                    $.getJSON("/user/currentUser", function (r) {
                        console.log(r.result);
                        if (r.result == true) {
                            self.ruleUser = r.data;
                            const currentUser = document.getElementById("current_user");
                            currentUser.innerHTML = "欢迎您! " + r.data.name;
                            self.ruleLoginIf = true;
                            app.loadAllRule();
                        } else {
                            self.ruleLoginIf = false;
                            const currentUser = document.getElementById("current_user");
                            currentUser.innerHTML = "请登录";
                            location.href = "/login.html";
                        }
                    })
                },

                //根据id删除任务
                deleteRuleById: function (id, index) {
                    const self = this;
                    $.getJSON("/rule/delete/" + id, function (r) {
                        self.rules.splice(index, 1);
                    })
                },


                // 添加一个任务
                addRule: function () {
                    $.ajax({
                        url: '/rule/save',
                        type: 'POST',
                        data: JSON.stringify(this.editRule), //转换为JSON
                        contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: (r) => {
                            this.rules.push(r.data);
                            console.log(r);
                        },
                        error: () => {
                            alert('提交请求失败');
                        }
                    })
                }
                ,
                //修改令牌
                updateRule: function () {
                    $.ajax({
                        url: '/rule/update',
                        type: 'POST',
                        data: JSON.stringify(this.editRule), //转换为JSON
                        contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: (r) => {
                            // this.hideEditView = true;
                            console.log(r);
                        },
                        error: () => {
                            alert('提交请求失败');
                        }
                    })
                },
                conceal: function (id, idx) {
                    // this.hideEditView = !this.hideEditView;//不隐藏
                    this.editRule = this.rules[idx];
                    console.log(this.editRule);
                }
            }
        });
        // app.loadAllRule();
        app.ruleCurrentUser();
    </script>
</div>
</body>
</html>
